<template>
    <div>
      <div style="margin: 10px 0;">
        <el-form :rules="queryForm" ref="queryForm" :model="queryForm">
            <el-input style="width: 230px;" placeholder="请输入名称" suffix-icon="el-icon-search" v-model="queryForm.tasksname"></el-input>
            <el-button class="ml-5" type="primary" @click="load">搜索</el-button>
            <el-button type="warning" @click="reset">重置</el-button>
        </el-form>
      </div>

      <div style="margin: 10px 0;">
        <el-button type="primary" plain @click="handelAdd"><i class="el-icon-s-promotion"></i> 发布任务</el-button>
      </div>
      
      <el-table :data="tableData" :header-cell-class-name="'headerBg'" row-key="id" default-expand-all @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="80px"></el-table-column>
        <el-table-column prop="taskstype" label="任务类型"></el-table-column>
        <el-table-column prop="tasksname" label="任务名称"></el-table-column>
        <el-table-column prop="taskscontent" label="任务奖励"></el-table-column>
        <el-table-column prop="createTime" label="创建时间"></el-table-column>
        <el-table-column prop="updateTime" label="更新时间"></el-table-column>
        <el-table-column label="操作"  width="280" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="handelEdit(scope.row)"><i class="el-icon-edit"></i> 编辑</el-button>
            <el-popconfirm
              class="ml-5"
              confirm-button-text='确定'
              cancel-button-text='我再想想'
              icon="el-icon-info"
              icon-color="red"
              title="您确定删除这些数据吗"
              @confirm="del(scope.row.id)"
              >
            <el-button type="text" size="mini" slot="reference"><i class="el-icon-remove-outline"></i> 删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <div style="padding: 10px 0">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[2, 5, 10, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>

      <el-dialog title="任务信息" :visible.sync="dialogFormVisible" width="23%">
        <el-form label-width="100px" size="small" ref="form" :model="form" :rules="rules" :inline="true">
          <el-input v-model="form.id" placeholder="id" type="hidden"></el-input>
          <el-form-item label="任务类型" prop="taskstype">
          <el-select clearable v-model="form.taskstype" placeholder="请选择任务类型" style="width: 200px;">
            <el-option v-for="item in taskstypes" :key="item.name" :label="item.name" :value="item.name"></el-option>
          </el-select>
          </el-form-item>
          <el-form-item label="任务名称" prop="tasksname">
          <el-input v-model="form.tasksname" autocomplete="off" style="width: 200px;"></el-input>
          </el-form-item>
          <el-form-item label="任务奖励" prop="taskscontent">
          <el-input v-model="form.taskscontent" autocomplete="off" style="width: 200px;"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="save">确 定</el-button>
          <el-button @click="dialogFormVisible = false">取 消</el-button>
        </div>
      </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'Task',
    data() {
     return {
      //表单数据
      tableData: [],
      total: 0,
      pageNum: 1,
      pageSize: 10,
      dialogFormVisible: false,
      menuDialogVis: false,
      taskstypes:[],
      form:{},
      queryForm:{
        tasksname: '',
      },
      multipleSelection : [],
      menuData:[],
      props: {
        label: 'name',
      },
      expends: [],
      checks: [],
      roleId: 0,
      rules: {
        taskstype: [
        { required: true, message: '类型不能为空', trigger: 'blur' }
        ],
        tasksname: [
        { required: true, message: '名称不能为空', trigger: 'blur' }
        ],
        taskscontent: [
        { required: true, message: '奖励不能为空', trigger: 'blur' }
        ],
      }
     }
    },
    created(){
    //请求分页查询
    this.load()
  },
    methods: {
      
        //请求分页查询
      load(){
      this.request.get("/task/page",{
        params:{
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          tasksname:this.queryForm.tasksname,
        }
      }).then(res => {
        this.tableData = res.data.records
        this.total = res.data.total
      })
      this.request.get("/task/taskstype").then(res => {
        this.taskstypes = res.data
      })
  },
  //新增修改
  save(){
    this.$refs['form'].validate((valid) => {
    if (valid) {
    this.request(
      {
        method: "post",
        url: "/task/save",
        data:{
          "id": this.form.id,
          "tasksname": this.form.tasksname,
          "taskscontent": this.form.taskscontent,
          "taskstype": this.form.taskstype,
          "createTime": this.form.createTime,
          "updateTime": this.form.updateTime,
        },
        //请求头
        headers: { 'Content-Type': 'application/json' },
      }).then(res => {
        if(res){
          this.$message.success("保存成功")
          this.dialogFormVisible = false
          this.load()
        }else{
          this.$message.error("保存失败")
       }
      })
    } else {
      // 校验失败，不执行保存修改操作
    }
  });
  },
  handelAdd(){
    this.dialogFormVisible = true
    this.form = {}
  },
  handelEdit(row){
    this.form = row
    this.dialogFormVisible = true
  },
  //删除
  del(id){
    this.request.delete("/task/" + id).then(res =>{
      if(res){
        this.$message.success("删除成功")
        this.load()
      }else{
        this.$message.error("删除失败")
      }
    })
  },
  handleSelectionChange(val) {
    // console.log(val);
    this.multipleSelection = val
  },
  reset(){
    this.queryForm.tasksname = ""
    this.load()
  },
  handleSizeChange(pageSize){
    console.log(pageSize);
    this.pageSize = pageSize;
    this.load()
  },handleCurrentChange(pageNum){
    console.log(pageNum);
    this.pageNum = pageNum;
    this.load()
  },
    }
}
</script>

<style>
.headerBg{
  background: #eee !important;
}
</style>